<div class="order-detail">
	<h3  routerLink="/indexMy">
		<img style="margin-right: 1rem;width:1rem;" src="../../../assets/icons/back2.png" alt="">
		{{ 'order-Page.FASJZ' | translate }}
	</h3>
	<div class="order-detail-tree">
		<div class="order-detail-tree-text">
			<span [ngClass]="{active:active >= 1}">{{ 'order-Page.html1' | translate }}</span>
			<span [ngClass]="{active:active >= 2}">{{ 'order-Page.html2' | translate }}</span>
			<span [ngClass]="{active:active >= 3}">{{ 'order-Page.html2' | translate }}</span>
		</div>
		<div class="order-detail-tree-tag" [ngClass]="{active:active >= 2}">
			<div [ngClass]="{active:active >= 1}">
				<img src="../../assets/images/usercenter/icon-tree.png" />
				<img src="../../assets/images/usercenter/icon-tree-active.png" class="active" />
			</div>
			<div [ngClass]="{active:active >= 2}">
				<img src="../../assets/images/usercenter/icon-tree.png" />
				<img src="../../assets/images/usercenter/icon-tree-active.png" class="active" />
			</div>
			<div [ngClass]="{active:active >= 3}">
				<img src="../../assets/images/usercenter/icon-tree.png" />
				<img src="../../assets/images/usercenter/icon-tree-active.png" class="active" />
			</div>
		</div>
		<div class="order-detail-tree-text">
			<span [ngClass]="{active:active >= 1}">{{ 'order-Page.html3' | translate }}</span>
			<span [ngClass]="{active:active >= 2}">{{ 'order-Page.html4' | translate }}</span>
			<span [ngClass]="{active:active >= 3}">{{ 'order-Page.html5' | translate }}</span>
		</div>
	</div>
	<p class="order-step-text" *ngIf="active === 1">
		{{ 'order-Page.YZFFY-TEXT' | translate }}<span>{{ del?.payTime }}</span>
	</p>
	<p class="order-step-text" *ngIf="active === 2">
		{{ 'order-Page.KFGT-TEXT' | translate }}<span>{{ del?.prepareTime }}</span>
	</p>
	<p class="order-step-text" *ngIf="active === 3">
		{{ 'order-Page.ZNYK-TEXT' | translate }}<span>{{ del?.completeTime }}</span>
	</p>
	<div class="order-detail-info">
		<h3>{{ 'order-Page.YYXXXX' | translate }}</h3>
		<p>
			{{ 'order-Page.YYDH' | translate }}<span>{{ del?.id }}</span>
		</p>
		<p>
			{{ 'order-Page.HYNC' | translate }}<span>{{ del?.loginId }}</span>
		</p>
		<p>
			{{ 'order-Page.LXFS' | translate }}<span>{{ del?.mobile }}</span>
		</p>
		<p>
			{{ 'order-Page.YXDZ' | translate }}<span>{{ del?.email }}</span>
		</p>
		<p>
			{{ 'order-Page.LXS' | translate }}<span>{{ del?.agencyName }}</span>
		</p>
		<p>
			{{ 'order-Page.DY' | translate }}
			<span *ngIf='del?.guideName'>{{ del?.guideName }}</span>
			<span *ngIf='!del?.guideName'>{{ 'order-Page.html6' | translate }}</span>
		</p>
		<p>
			{{ 'order-Page.YYRQ' | translate }}<span>{{ del?.reserveDate }}</span>
		</p>
		<div class="order-detail-info-xcnr">
				{{ 'order-Page.BZ' | translate }}
				<pre readonly  *ngIf='del.memo'>{{ del?.memo }}</pre>
				
		</div>
		<!-- <p>
			{{ 'order-Page.TJSJ' | translate }}<span>{{ del?.createTime }}</span>
		</p> -->
		<div *ngIf='active >= 3' class="order-detail-info-xcnr">
			<h3>{{ 'order-Page.html7' | translate }}</h3> 
			<pre readonly  *ngIf='del.prepareMemo' >{{del?.prepareMemo}}</pre>
		</div>
		<a class="order-detail-btn" href="tel:1333333333"><img src="../../assets/images/usercenter/icon-phone.png" />{{ 'order-Page.LXKF' | translate }}</a>
		<!-- <a style="background: #999;color:#fff;" class="order-detail-btn" routerLink="/">返回首頁</a> -->
	</div>
</div>
